<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个bootstrap</title>

    <style>

        .mybutton{
            color: rebeccapurple;
            font-size: 20px;
        }
    </style>

    <link href="css/bootstrap.min.css" rel="stylesheet" >

    <link rel="stylesheet" href="css/layui.css">

    <style>

        .left{
            background: cornflowerblue;
        }

    </style>
</head>
<body>


<!--导航/ -->


<div class="container">

            <div class="row">
                <div class="col-6">

                    <ul class="nav">
                        <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Active</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                        </li>
                        <li>
                            
                        </li>
                        </ul>
                </div>
                <div class="col">

                </div>
                <div class="col-3 col-sm-3">

                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
                        <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
                        </div>
                </div>
            </div>

       

            


    <!-- 主体 -->

    <div class="row">

        <div class="left col-3"></div>
        <div class="right col">

            <table class="layui-table">
                <colgroup>
                  <col width="150">
                  <col width="150">
                  <col>
                </colgroup>
                <thead>
                  <tr>
                    <th>人物</th>
                    <th>民族</th>
                    <th>格言</th>
                  </tr> 
                </thead>
                <tbody>
                  <tr>
                    <td>孔子</td>
                    <td>华夏</td>
                    <td>有朋自远方来，不亦乐乎</td>
                  </tr>
                  <tr>
                    <td>孟子</td>
                    <td>华夏</td>
                    <td>穷则独善其身，达则兼济天下</td>
                  </tr>
                </tbody>
              </table>
              <p>行边框表格:</p>
              <table class="layui-table" lay-skin="line">
                <colgroup>
                  <col width="150">
                  <col width="150">
                  <col>
                </colgroup>
                <thead>
                  <tr>
                    <th>人物</th>
                    <th>民族</th>
                    <th>格言</th>
                  </tr> 
                </thead>
                <tbody>
                  <tr>
                    <td>孔子</td>
                    <td>华夏</td>
                    <td>有朋自远方来，不亦乐乎</td>
                  </tr>
                  <tr>
                    <td>孟子</td>
                    <td>华夏</td>
                    <td>穷则独善其身，达则兼济天下</td>
                  </tr>
                </tbody>
              </table>
        </div>

    </div>

    <div class="layui-btn-container">
        <button type="button" class="layui-btn">默认按钮</button>
        <button type="button" class="layui-btn layui-bg-blue">蓝色按钮</button>
        <button type="button" class="layui-btn layui-bg-orange">橙色按钮</button>
        <button type="button" class="layui-btn layui-bg-red">红色按钮</button>
        <button type="button" class="layui-btn layui-bg-purple">紫色按钮</button>
        <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
      </div>


        
</div>
<!--     
    <div class="d-grid gap-2">
        <button class="btn btn-outline-primary btn-sm">点击</button>
    
    </div> -->
 
   
</body>
</html>